<template>
	<view class="tab-page">
		<nav-bar back more style="font-weight: 800;">猜拳记录</nav-bar>
		<view class="content">
			<view class="search-box" v-for="chat in jl" :key="chat.id">
				<div class="back">
					<div class="left">
						<div class="name">
							<!-- 名字： <br> -->
						</div>
						<div class="jilu" :style="userId==chat.initiatorId?{color:'#3e45d7'}:{}">
							{{ chat.initiatorUserName }}：
							<!-- 删除#符号和;-->
							<!-- {{ chat.initiatorMessage.replace(/#/g, '').replace(/;/g, '') }} -->
							<!-- {{ chat.initiatorMessage }} -->
							<image class="send-image"
								:src="`../../static/caiquan/${chat.initiatorMessage=='#石头;'?'1':chat.initiatorMessage=='#剪刀;'?'2':chat.initiatorMessage=='#布;'?'3':''}.png`"
								alt="">
							</image>
						</div>
					</div>
					<div class="left">
						<div class="name">
							<!-- 名字：<br> -->
						</div>
						<div class="jilu" :style="userId==chat.respondersId?{color:'#3e45d7'}:{}">
							{{ chat.respondersUserName }}：
							<!-- {{ chat.respondersMessage.replace(/#/g, '').replace(/;/g, '') }} -->
							<image class="send-image"
								:src="`../../static/caiquan/${chat.respondersMessage=='#石头;'?'1':chat.respondersMessage=='#剪刀;'?'2':chat.respondersMessage=='#布;'?'3':''}.png`"
								alt="">
							</image>
						</div>
					</div>
				</div>
			</view>
		</view>
		<div style="text-align: center;color: #a0a5a9;">暂时只支持最近100条</div>
	</view>
</template>

<script>
	import {
		string
	} from '../../uni_modules/uview-plus/libs/function/test'
	import useChatStore from '@/store/chatStore.js'

	export default {
		data() {
			return {
				showSearch: false,
				searchText: "",
				jl: [],
				menu: {
					show: false,
					style: "",
					chatIdx: -1,
					isTouchMove: false,
					items: [{
							key: 'DELETE',
							name: '删除该聊天',
							icon: 'trash',
							color: '#e64e4e'
						},
						{
							key: 'TOP',
							name: '置顶该聊天',
							icon: 'arrow-up'
						}
					]
				},
				respondersId: '',
				userId: ''
			}
		},
		onLoad(options) {
			this.respondersId = options.id
			this.jilu()
		},
		methods: {
			jilu() {
				const that = this
				if (!this.userStore.userInfo.id) return
				this.userId = this.userStore.userInfo.id
				console.log('当前用户', this.userStore.userInfo.id);
				this.$http({
					url: `/interaction/list?initiatorId=${that.userStore.userInfo.id}&respondersId=${that.respondersId*1}`,
					method: 'GET',
				}).then((group) => {
					console.log('猜拳记录', group)
					this.jl = group

				});
			},
			onSelectMenu(item, chatIdx) {
				switch (item.key) {
					case 'DELETE':
						this.removeChat(chatIdx);
						break;
					case 'TOP':
						this.moveToTop(chatIdx);
						break;
					default:
						break;
				}
				this.menu.show = false;
			},
			removeChat(chatIdx) {
				this.chatStore.removeChat(chatIdx);
			},
			moveToTop(chatIdx) {
				this.chatStore.moveTop(chatIdx);
			},
			isShowChat(chat) {
				if (chat.delete) {
					return false;
				}
				return !this.searchText || chat.showName.includes(this.searchText)
			},
			onSearch() {
				this.showSearch = !this.showSearch;
				this.searchText = "";
			},
			refreshUnreadBadge() {
				if (this.unreadCount > 0) {
					uni.setTabBarBadge({
						index: 0,
						text: this.unreadCount + ""
					})
				} else {
					uni.removeTabBarBadge({
						index: 0,
						complete: () => {}
					})
				}
				// Android平台调用原生API设置角标
				// #ifdef APP-PLUS
				if (uni.getSystemInfoSync().platform === 'android') {
					plus.runtime.setBadgeNumber(this.unreadCount);
				}
				// #endif

			}
		},
		computed: {
			unreadCount() {
				let count = 0;
				this.chatStore.chats.forEach(chat => {
					if (!chat.delete) {
						count += chat.unreadCount;
					}
				})
				return count;
			},
			loading() {
				return this.chatStore.loadingGroupMsg || this.chatStore.loadingPrivateMsg
			}
		},
		watch: {
			unreadCount(newCount, oldCount) {
				this.refreshUnreadBadge();
			}
		},
		onShow() {
			this.refreshUnreadBadge();
		}
	}
</script>

<style scoped lang="scss">
	.tab-page {
		min-height: calc(100vh - 50px);

		.content {
			margin: 5px 0;

			.back {
				// width: 100%;
				display: flex;
				justify-content: space-between;

				.left {
					// color: white;
					flex: 1;
					line-height: 80rpx;
					// width: 45%;
					// height: 300rpx;
					// background-color: rgb(107, 107, 107);
					display: flex;
					flex-direction: column;
					// justify-content: center;
					align-items: flex-end;
					border: 1rpx solid #eee;

					.name {
						font-size: 40rpx;
						font-weight: 600;
						// height: 45%;
					}

					.jilu {
						font-size: 30rpx;
						font-weight: 400;
						// height: 45%;
						margin-right: 20%;
						display: flex;
						align-items: center;
						padding: 10rpx 0;

						.send-image {
							min-width: 60rpx;
							max-width: 100rpx;
							height: 80rpx;
							cursor: pointer;
							border-radius: 4px;
						}
					}
				}
			}
		}
	}
</style>